<template>
	<view>
		<fa-navbar title="在线考试"></fa-navbar>
		<view class="content">
			<view class="container">
				<!-- 背题模式 -->
				<fa-beiti v-if="mode == 1" :questions="questions" :judgeOptions="judgeOptions"></fa-beiti>
				<!-- 练题模式 -->
				
				<fa-lianti v-if="mode == 2" :questions="questions" :judgeOptions="judgeOptions"></fa-lianti>
				<!-- 模拟考试 -->
				<fa-mnks v-if="mode == 3" :questions="questions" :judgeOptions="judgeOptions"></fa-mnks>
				<!-- 我的错题 -->
				<!-- <fa-wrong v-if="mode == 4" :questions="questions" :judgeOptions="judgeOptions"></fa-wrong> -->
			</view>

		</view>
	</view>
</template>

<script>
	import FaBeiti from './components/fa-beiti/fa-beiti.vue';
	import FaLianti from './components/fa-lianti/fa-lianti.vue';
	import FaMnks from './components/fa-mnks/fa-mnks.vue';
	// import FaWrong from './components/fa-wrong/fa-wrong.vue';
	export default {
		components:{
			FaBeiti,
			FaLianti,
			FaMnks,
			// FaWrong
		},
		onLoad(e) {
			this.mode = e.mode
			this.majorId = e.majorId
			this.categoryId = e.category_id
			this.getQuestionList()
		},
		data() {
			return {
				questions: [{kind:''}],
				currentIndex: 0,
				timeRemaining: 3592, // 总秒数（59分52秒）
				userAnswers: [],
				judgeOptions: [],
				tkShow:false,
				mode:0,
				majorId:0,
				categoryId:0,
				mode:'normal'
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				if (this.timeRemaining > 0) {
					this.timeRemaining--
				} else {
					clearInterval(this.timer)
					this.submitExam()
				}
			}, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			getQuestionList(){
				if(this.mode==3){
					this.mode_str="random"
				}
				this.$api.getQuestionList({params:{major_id:this.majorId,category_id:this.categoryId,mode:this.mode_str}}).then((res)=>{
					if(res.code){
						this.questions = res.data
					}
				})
			},
			choiceTopic(index){
				this.currentIndex = index
				this.tkShow = false
			},

			// 增加答案保存逻辑
			saveProgress() {
				uni.setStorageSync('exam_progress', {
					answers: this.userAnswers,
					timestamp: Date.now()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content {
		padding-top: 188rpx;
	}

	.container {
		// padding: 0 30rpx 30rpx 30rpx;
		min-height: 100vh;
		background-color: #eaeaea;
		
	}

	.fix-bottom {
		bottom: calc(env(safe-area-inset-bottom) + 15px);
		width: 95%;
		position: fixed;
		margin: 0 auto;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding-bottom: 24rpx;
		.grid-text{
			font-size: 26rpx;
			color: #666666;
		}
	}


	.exam-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0rpx;
		background-color: #ffffff;
		padding: 20rpx 0;
		.exam-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.timer {
			
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			
		}
	}

	.question-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		.question-type {
			// font-size: 28rpx;
			// color: #666;
			    font-size: 24rpx;
			    color: #fff;
			    background: linear-gradient(135deg, #7892fd, #5677fc);
			    padding: 8rpx 10rpx;
			    border-radius: 14rpx 14rpx 14rpx 0;
			    margin-right: 20rpx;
		}

		.question-progress {
			font-size: 28rpx;
			color: #007AFF;
		}
	}

	.question-content {
		font-size: 32rpx;
		line-height: 1.6;
		margin-bottom: 50rpx;
		color: #333;
	}

	.options {
		.option-item {
			padding: 25rpx 30rpx;
			margin-bottom: 20rpx;
			background-color: #f6f6f6;
			border-radius: 12rpx;
			border: 1rpx solid #eee;
			position: relative;
			transition: all 0.2s;

			&.active {
				background-color: #e6f3ff;
				border-color: #007AFF;
				color: #007AFF;
			}

			&.multiple {
				padding-right: 80rpx;

				.checkmark {
					position: absolute;
					right: 30rpx;
					color: #007AFF;
					font-weight: bold;
				}
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 0;

		button {
			flex: 0.48;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;

			&[disabled] {
				background-color: #eee !important;
				color: #999 !important;
			}
		}

		.prev-btn {
			background-color: #f8f8f8;
			color: #666;
		}

		.next-btn {
			background-color: #007AFF;
			color: white;
		}
	}
	.tm-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 24rpx;
		.tm-xh{
			height: 88rpx;
			width: 88rpx;
			border-radius: 50%;
			margin-bottom: 30rpx;
			border: 1rpx solid #d0d0d0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 44rpx;
			color: #333;
		}
		.active-xh{
			background-color: #007AFF;
			color: #ffffff;
		}
	}
</style>